<template>
  <div>
    <el-form ref="form" :model="form">
      <el-table
        border
        :data="tableData3"
        tooltip-effect="dark"
        style="width: 50%"
      >
        <el-table-column label="日期" width="120">
          <template slot-scope="{row, $index}">
            <!-- {{ $index }}---{{ row.date }} -->
            <el-form-item v-if="$index == 0" label="">
              <el-input v-model="form.age" placeholder="年龄"></el-input>
            </el-form-item>
            <el-form-item v-else-if="$index == 1" label="">
              <el-input v-model="form.sex" placeholder="性别"></el-input>
            </el-form-item>
            <span v-else>{{ $index }}---{{ row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        age: '',
        sex: ''
      },
      tableData3: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          check: 1
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          check: 0
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          check: 1
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: []
    };
  },
  mounted() {
    this.toggleSelection(this.tableData3.filter(i => i.check == 1))
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        console.log(this.multipleSelection)
      }
    },
    // 是否可以勾选
    selectable(row) {
      if (row.name !== '王小虎1') {
        return true;
      } else {
        return false;
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
  },
};
</script>
